<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>标题</th><th>价格</th><th>库存</th>
    </tr>
</table>
<script>
    //1. 实例化一个空对象        Person.java     Person p = new Person();  p.age=10;
    let p1 = {};
    //JS语言中可以动态添加属性和方法
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    p1.run();//调用方法
    //2. 实例化自带属性和方法的对象
    let p2 = {
        name: "李四",
        age: 20,
        run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();
    //3. 通过自定义对象封装数据
    let arr = [{title:"小米14手机",price:5000,num:200},
        {title:"华为非凡大师手机",price:10000,num:1000}]
    //把数组中的数据显示到表格中
    let table = document.querySelector("table");
    //循环遍历数组
    for (let item of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        titleTd.innerText = item.title;
        priceTd.innerText = item.price;
        numTd.innerText = item.num;
        tr.append(titleTd,priceTd,numTd);
        table.append(tr);
    }


</script>
</body>
</html>